﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>日志主页</title>

    <link href="css/blog_index.css" rel="stylesheet" type="text/css" media="all">
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="/js/vue.min.js"></script>

</head>

<body>
<div id="div1">
<div id="head">
    <span class="span1">SmartBlog</span>
    <span class="span2"><em>share java knowledge</em></span>
</div>
<div id="body">
    <div class="title">
        <ul>
            <li id="shouye"><a href="#">首页</a></li>
            <li><a href="blog_login.html">登陆</a></li>
            <li><a href="blog_login.html">个人中心</a></li>
        </ul>
    </div>
    <div class="left">
        <div class="left1">
            <p class="page">
                共{{pageInfo.pages}}}页
                <button @click="findAllEnptyL(1)">首页</button>|
                <button @click="findAllEnptyL(pageInfo.prePage)">上一页</button>|
                <button @click="findAllEnptyL(pageInfo.nextPage)">下一页</button>|
                <button @click="findAllEnptyL(pageInfo.pages)">尾页</button>
            </p>
        </div>
        <div class="xia">
            <ul v-for="entry in pageInfo.list">
                <li class="top1">{{entry.title}}</li>
                <li class="top2">{{entry.content | shortval}}
                    <button @click="setId(entry.id)">阅读全文</button>
                </li>
                <li class="top3"><span><img src="images/bt_detail.gif"/> {{entry.modifytime}} 分类
                    <img src="images/folderopen.gif"/>
                    <a href="#">{{entry.categoryid}}</a>
                    <img src="images/comment.jpg"/>
                    <a href="blog_comment.html">发表评论</a> 阅读:1 评论数:2</span>
                </li>
            </ul>

            <p class="page">
                共{{pageInfo.pages}}页
                <button @click="findAllEnptyL(1)">首页</button>|
                <button @click="findAllEnptyL(pageInfo.prePage)">上一页</button>|
                <button @click="findAllEnptyL(pageInfo.nextPage)">下一页</button>|
                <button @click="findAllEnptyL(pageInfo.pages)">尾页</button>
            </p>
        </div><!--内容-->
    </div><!-- 内容-->
    <div class="right">
        <div class="right1_1">
            <div class="right2"> &nbsp;关于</div>
            <span> &nbsp;this is my smart bolg, share java knowledge on ssh</span>
        </div>
        <div class="right1">
            <div class="right2"> 博客分类</div>
            <ul>
                <li><A HREF="HEHE">全部</A></li>
                <li><A HREF="HEHE">JAVA</A></li>
                <li>SQL</li>
                <li>HTML</li>
            </ul>
        </div>
        <div class="right1">
            <div class="right2"> &nbsp;最新日志</div>
            <ul>
                <li>java日志8</li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="right1">
            <div class="right2"> &nbsp;最新评论</div>
            <ul>
                <li>w</li>
                <li>w</li>
                <li>w</li>
            </ul>
        </div>
        <div class="right1_1">
            <div class="right2"> &nbsp;友情链接</div>
            <p>&nbsp;&nbsp;&nbsp;<a href="#">百度</a>
                <a href="#">新浪</a>
                <a href="#">搜狐</a>
                <a href="#">淘宝</a>
                <a href="#">京东</a>
                <a href="#">赶集</a>
            </p>
        </div>
    </div><!-- 内容-->
</div>
<div id="foot"><span>Copyright &copy; 2013-2020 </span></div>


</div>
</body>
</html>
<script>
    var vm = new Vue({
        el:"#div1",
        data:{
            npage:0,
            pageInfo:null
        },
        created(){
            this.findAllEnptyL(1);
        },
        methods:{
            setId:function(id){
                //alert("id--->"+id)
                var path = "/setId/"+id;
                axios.get(path,null).then(function (obj) {
                    if(obj.status==200){
                        if( obj.data.code==200){
                           alert(obj.data.msg);
                           location.href = "/blog_comment.html"
                        }
                    }
                }).catch(function () {
                    alert("setId--->出现了异常");
                })
            },
            //页面加载就执行的方法
            findAllEnptyL:function(npage){
                //alert("npage--->"+npage)
                var path = "/findAllEnptyL/"+npage;
                axios.get(path,null).then(function (obj) {
                    if(obj.status==200){
                        if( obj.data.code==200){
                            vm.pageInfo = obj.data.result;
                        }
                    }
                }).catch(function () {
                    alert("findAllEnptyL--->出现了异常")
                })
            }
        },
        filters:{
            shortval:function(value){
                if(value.length < 10){
                    return value;
                }else{
                    return value.substr(0,10)+"...";
                }
            }
        }
    })
</script>

